<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.mystyle {
			background-color: aqua;

		}

		.current {
			background-color: #ccc;
		}

		.block {
			display: block;
		}

		.none {
			display: none;
		}
	</style>
	<body>
		<!-- <button>我是按钮</button>
		<img src="./alipay.png" title="我是图片" alt="" />
		<input type="text" value="我很帅" />
		<div></div> -->
		<ul>
			<li class="current">one</li>
			<li>two</li>
			<li>three</li>
		</ul>

		<div class="block">内容一</div>
		<div class="none">内容二</div>
		<div class="none">内容三</div>

	</body>
	<script>
		// var mybtns = document.querySelector('button')
		// var imgs  = document.querySelector('img')
		// var inp = document.querySelector('input')
		// console.log(mybtns);
		// mybtns.onclick = function (){
		// 	inp.value = '你好啊！'
		// 	inp.disabled = true
		// }
		// var zxcdiv = document.querySelector('div')
		// zxcdiv.setAttribute('id','one')
		// zxcdiv.setAttribute('class','mystyle')
		// zxcdiv.textContent = '哈哈哈'
		var lilist = document.querySelectorAll('li')
		var divlist = document.getElementsByTagName('div')
		for (var i = 0; i < lilist.length; i++) {
			lilist[i].onclick = changetab
			lilist[i].setAttribute('index', i)
		}

		function changetab() {
			for (var i = 0; i < lilist.length; i++) {
				if (lilist[i] !== this) {
					lilist[i].className = ''
				} else {
					this.className = 'current'
				}
			}
			var index = this.getAttribute('index')

			for (var z = 0; z < divlist.length; z++) {
				if(divlist[z]!==divlist[index]){
					divlist[z].className = 'none'
				}else{
					divlist[z].className = 'block'
				}
			}
		}
	</script>
</html>